<template>
  <div>
    <a-form
      ref="formRef"
      name="advanced_search"
      class="ant-advanced-search-form"
      :model="formState"
      @finish="onFinish"
    >
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item name="时间查询" label="时间查询">
            <a-date-picker
              v-model:value="formState.queryTime"
              value-format="YYYY-MM-DD"
            />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item name="订单编号" label="订单编号">
            <a-input
              v-model:value="formState.queryOrder"
              placeholder="输入订单号"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item name="邀请码" label="邀请码">
            <a-input
              v-model:value="formState.code"
              placeholder="邀请码"
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a-button type="primary" html-type="submit">查询</a-button>
        </a-col>
      </a-row>
    </a-form>
    <a-table
      bordered
      :pagination="{ total }"
      @change="pageChange"
      :data-source="dataSource"
      :columns="columns"
    >
      <template #progress="{ text }">
        <div class="editable-cell">
          <div class="editable-cell-input-wrapper">
            {{ text === 0 ? '改写完成' : '改写中' }}
          </div>
        </div>
      </template>
      <template #state="{ text }">
        <div class="editable-cell">
          <div class="editable-cell-input-wrapper">
            {{
              text === 2
                ? '已退款'
                : text === 0
                ? '已支付'
                : text === -1
                ? '未支付'
                : text === 1
                ? '订单未找到或已取消'
                : ''
            }}
          </div>
        </div>
      </template>
      <template #payMethod="{ text }">
        <div class="editable-cell">
          <div class="editable-cell-input-wrapper">
            {{ text === 1 ? '支付宝' : '微信' }}
          </div>
        </div>
      </template>
      <template #operation="{ text }">
        <a-popconfirm
          v-if="text.orderNo && text.state === 0"
          title="确定退款?"
          @confirm="onDelete(text.orderNo)"
        >
          <a>退款</a>
        </a-popconfirm>
      </template>
    </a-table>
  </div>
</template>

<script>
  import { message } from 'ant-design-vue'
  import { investInfo, oderInfoRefund } from '../../../api/table.js'
  import { reactive, ref } from 'vue'
  export default {
    name: 'invest',
    setup() {
      const total = ref(0)
      const refundMoney = ref(0)
      const formRef = ref()
      const formState = reactive({
        queryTime: ref(),
        queryOrder: ref(''),
        code: '',
        pageNum: 1,
        pageSize: 10,
      })
      const dataSource = ref([])
      const initPage = async () => {
        const { queryTime, queryOrder, code, pageNum, pageSize } = formState
        let res = await investInfo({
          queryTime,
          queryOrder,
          code,
          pageNum,
          pageSize,
        })
        console.log(res)
        if (res.code) {
          total.value = res.data.countNum
          dataSource.value = res.data.packetOrderInfo.map((r) => {
            return {
              time: r.payTime ? r.payTime.substr(0, 11) : '',
              code: r.orderNo,
              id: r.userId,
              money: r.payPrice || 0,
              //   progress: r.status,
              num: r.remainWords,
              payMethod: r.payType,
              reFundMoney: r.reFundMoney || 0,
              state: r.state,
              operation: {
                visible: false,
                orderNo: r.orderNo,
                money: r.payPrice || 0,
                state: r.state,
              },
            }
          })
        } else {
          dataSource.value = []
        }
      }

      const pageChange = (e) => {
        console.log(e.current)
        formState.pageNum = e.current
        initPage()
      }
      const onFinish = () => {
        initPage()
      }
      const columns = [
        {
          title: '订单时间',
          dataIndex: 'time',
          width: '14%',
        },
        {
          title: '订单编号',
          dataIndex: 'code',
          slots: {
            customRender: 'code',
          },
        },
        {
          title: '用户id',
          dataIndex: 'id',
        },
        {
          title: '剩余字数',
          dataIndex: 'num',
        },
        {
          title: '实付金额',
          dataIndex: 'money',
        },

        {
          title: '支付方式',
          dataIndex: 'payMethod',
          slots: {
            customRender: 'payMethod',
          },
        },
        {
          title: '订单状态',
          dataIndex: 'state',
          slots: {
            customRender: 'state',
          },
        },
        {
          title: '退款金额',
          dataIndex: 'reFundMoney',
          slots: {
            customRender: 'reFundMoney',
          },
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '16%',
          slots: {
            customRender: 'operation',
          },
        },
      ]
      const onDelete = async (orderNo) => {
        let res = await oderInfoRefund({ orderNo })
        if (res.code) {
          initPage()
        } else {
          message.warning(res.msg)
        }
      }
      initPage()
      return {
        formRef,
        formState,
        total,
        refundMoney,
        initPage,
        pageChange,
        onFinish,
        onDelete,
        columns,
        dataSource,
      }
    },
  }
</script>

<style lang="scss" scoped></style>
